Ext.define('Seq.widget.WidgetD', {
    extend: 'Seq.widget.Widget',
    xtype: 'widget-d',

    minHeight: 80,
    minWidth: 120,
    cls: 'info-card-d',

    layout: {
        type: 'vbox',
        align: 'middle',
        pack: 'center'
    },

    items: [{
        xtype: 'component',
        cls: 'value',
        html: '',
    }, {
        xtype: 'container',
        layout: 'hbox',
        defaults: {
            xtype: 'component',
            html: '',
            flex: 1
        },
        items: [{
            cls: 'text'
        }, {
            cls: 'unit'
        }]
    }],

    val2div: function (color, value) {
        let me = this;
        return Ext.String.format('<div class="fa-{0}">{1}</div>', me.colorOfValue(color, value), value);
    },

    setValue(value) {
        let me = this;
        if (me.items.items) {
            me.callParent(arguments);
            let data = me.getData();
            me.items.items[0].setHtml(me.val2div(data.color || me.config.color, data.value));
        } else {
            me.items[0].html = me.val2div(me.config.color, value);
        }
    },

    setColor(value) {
        let me = this;
        if (me.items.items) {
            me.callParent(arguments);
            me.items.items[0].setHtml(me.val2div(value, me.getData().value));
        } else {
            me.items[0].html = me.val2div(value, me.config.value);
        }
    },

    setText(value) {
        this.items[1].items[0].html = value;
    },

    setUnit(value) {
        let me = this;
        if (!Ext.isEmpty(value)) {
            value = '(' + value + ')';
        }
        if (me.items.items) {
            me.items.items[1].items[1].setHtml(value);
        } else {
            me.items[1].items[1].html = value;
        }
    }

});
